<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <wx-tables
    :columns="columns"
    title="游览路线"
    :data-source="dataSource"
    :loading="loading"
    :total="total"
    :size.sync="size"
    :page.sync="page"
    @handlePage="handlePage"
  >
    <!-- tools -->
    <template #tools>
<!--      <el-input v-model="searchForm.user" class="m-r-10" placeholder="搜索景区名称"></el-input>-->
<!--      <el-button type="primary" class="table-btn m-r-20">查询</el-button>-->
      <el-button type="primary" class="table-btn" @click="handleOpenForm()">新增路线</el-button>
      <!--      <el-button class="table-btn" icon="el-icon-refresh-right" @click="handleGetTable">刷新</el-button>-->
    </template>
    <template v-slot:status="record">
      <el-switch
        v-model="record.row.status"
        :active-value="1"
        :inactive-value="0"
        active-color="#409EFF"
        inactive-color="#C0CCDA"
        @change="handleSetStatus(record.row)">
      </el-switch>
    </template>
    <template v-slot:oper="record">
      <div class="oper-box">
<!--        <span><el-link type="primary" @click="handleOpenFormByRow(record.row)">编辑</el-link></span>-->
        <el-popconfirm
          title="确定删除当前路线吗？"
          @confirm="handleDelete(record.row.id)"
        >
          <el-link slot="reference" type="danger">删除</el-link>
        </el-popconfirm>
      </div>
    </template>

    <wx-full :title="isAdd? '新增' : '编辑'" :visible.sync="formVisible">
      <!--      <template v-slot:tools>-->
      <!--        &lt;!&ndash;        <el-link v-if="isAdd" type="primary" :disabled="formBtnDisabled" @click="handleSaveDraft">保存草稿</el-link>&ndash;&gt;-->
      <!--        &lt;!&ndash;        <el-link v-else type="primary" :disabled="formBtnDisabled" @click="handleSaveMyForm">保存</el-link>&ndash;&gt;-->
      <!--      </template>-->
      <merchant-info ref="myForm" :form-data="form_data" @saveFrom="handleSaveFrom" @close="handleClose" />
    </wx-full>

  </wx-tables>
</template>

<script>
import WxTables from '@/components/WxTables'
import WxFull from '@/components/WxFull'
import MerchantInfo from './TourRouteInfo'
import TableMixins from '@/components/WxTables/mixins'
import {
  tourScenicLineCreate,
  tourScenicLineDestroy,
  tourScenicLineGetListByCon,
  tourScenicLineSetStatus
} from '@/api/scenic'

export default {
  name: 'CommodityList',
  components: {
    WxTables,
    WxFull,
    MerchantInfo
  },
  mixins: [TableMixins],
  data() {
    return {
      pwdDialog: false,
      columns: [
        { config: { type: 'index', width: 100 }, label: '序号' },
        { dataIndex: 'name', label: '路线名称' },
        { dataIndex: 'spot_count', label: '途经景点个数' },
        { dataIndex: 'duration', label: '建议游览时长' },
        { dataIndex: 'status', label: '是否启用', slots: true },
        { dataIndex: 'oper', label: '操作', slots: true }
      ],
      markId: '',
      town_id: '',
      form_data: {}
    }
  },
  watch: {
    formVisible(val){
      this.handleGetTable()
      this.form_data = !val ? {} : this.form_data
      if(!val) {
        this.isAdd = false
      }
    },
  },
  methods: {
    /**
     * 获取列表
     */
    getList() {
      tourScenicLineGetListByCon({town_id:this.town_id,level:'label',page: this.page}).then(res => {
        if (this.pagination) {
          const { data, total } = res.data
          this.total = total
          this.dataSource = data
          this.cacheDataSource = JSON.parse(JSON.stringify(data))
        } else {
          this.dataSource = res.data
          this.cacheDataSource = JSON.parse(JSON.stringify(res.data))
        }
        this.handleSetCancelStatus?.()
        // this.handleCompleteTable()
      }).finally(() => {
        this.loading = false
      })
    },
    /**
     * 新增/编辑人员
     */
    createManager(idSend) {
      if(Object.keys(idSend).length) {
        tourShopEdit({ ...this.formInfo,...idSend,town_id: this.town_id })
          .then((res) => {
            if (res.code === 200) {
              this.$message.success(this.isAdd ? '添加成功' : '编辑成功')
              this.formInfo = {}
              this.formVisible = false
              this.handleGetTable()
            }
          })
      }else{
        tourScenicLineCreate({ ...this.formInfo,town_id: this.town_id })
          .then((res) => {
            if (res.code === 200) {
              this.$message.success(this.isAdd ? '添加成功' : '编辑成功')
              this.formInfo = {}
              this.formVisible = false
              this.handleGetTable()
            }
          })
      }
    },
    /**
     * 更改人员状态
     */
    changeStatus(id,status) {
      tourScenicLineSetStatus({
        tour_scenic_line_id: id,
        status
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.handleGetTable()
        }
      })
    },
    /**
     * 编辑
     * @param data
     */
    handleOpenFormByRow(data) {
      this.form_data = JSON.parse(JSON.stringify(data))
      if(data.work_day_start && data.work_day_end) {
        this.$set(this.form_data,'start_time',[this.$dayjs('1970-01-01'+ data.work_day_start).valueOf(),this.$dayjs('1970-01-01'+ data.work_day_end).valueOf()])
      }
      if(data.rest_day_start && data.rest_day_end) {
        this.$set(this.form_data,'end_time',[this.$dayjs('1970-01-01'+ data.rest_day_start).valueOf(),this.$dayjs('1970-01-01'+ data.rest_day_end).valueOf()])
      }
      this.form_data.imgs_json = this.form_data.imgs_json.map( item => {
        const uid = item.substring(29)
        return {url:item,uid}
      })
      this.formVisible = true
    },
    /**
     * 删除管理员
     * @param tour_shop_ids
     */
    handleDelete(tour_scenic_line_ids) {
      tourScenicLineDestroy({ tour_scenic_line_ids }).then((res) => { if (res.code === 200) {
        this.$message.success(res.msg)
        this.handleGetTable()
      } })
    },
    /**
     * 关闭
     */
    handleClose() {
      this.formVisible = false
    },
    /**
     * 保存
     * @param data
     */
    handleSaveFrom(data) {
      this.formInfo = data
      const idSend = !this.isAdd ? { tour_shop_id: data.id } : {}
      this.createManager(idSend)
    },
    /**
     * 翻页
     * @param val
     */
    handlePage(val) {
      this.page = val
    }
  }
}
</script>
<style lang="scss" src="./style/index.scss" scoped/>
<style scoped>
.m-r-10 {
  margin-right: 10px;
}
.m-r-20 {
  margin-right: 20px;
}
</style>
